大家好，我是 OXXO ( OXXO.STUDIO )，今年第 N 次參戰 iT 邦幫忙鐵人賽，我決定選擇了一個自己最熟悉、也最有熱情的主題：「關於那些有趣的 CSS 效果」，不過，我想這麼成熟的技術，可能沒有什麼人想寫了吧！( 苦笑 )

㊙️ 來這邊看完賽心得：CSS，依然讓我怦然心動！( 純純的連續 36 天完賽心得 )

累積 200 篇 CSS 教學的背後

這幾年來，我在 OXXO.STUDIO 和 STEAM 教育學習網 裡撰寫了大量 CSS 教學，範圍涵蓋基礎排版、 RWD 到動畫與進階互動技巧，這次我將從自己撰寫的 200 多篇 CSS 教學文章中，精選出至少 30 個有趣的效果，逐篇進行重新整理、補充與發表，不需要任何 JS 或框架，只需要 CSS 和一點點勇氣，就能探索各種實用又奇幻的特效技巧。

效果預告：跑馬燈、電子時鐘、翻牌動畫、漸層色星空背景、雙色文字、流動邊框、探照燈動畫、水波紋、立體碼表、視差滾動、愛心爆炸 hover 效果、純 CSS 實作的進度條...等。

AI 呢？AI 不是也能寫 CSS 嗎？

最近只要講起我在寫 CSS 教學，很多人就會說：「用 AI 就可以生成 CSS 了啊！」「還在寫 CSS，AI 就可以幫你寫啦！」沒錯，AI 確實能幫助我們快速產出可用的 CSS，特別是語法、基礎動畫、或是常見的 layout 排版，都可以輕鬆產生！

但是，身為一名和無數專案搏鬥過的前端工程師，我可以很負責任地說：

AI 寫 CSS 是輔助，但它不能代替你對畫面節奏與語意結構的理解。

我觀察到 AI 寫 CSS 的幾個真實弱點

• 視覺判斷力低，無法掌握畫面節奏

  AI 無法「看見」實際畫面，也不知道你設計系統的畫面、對象、比例與色彩感受。

• 命名與結構鬆散，維護地獄的起點

  AI 容易產出沒有語意的 class 結構，有時甚至完全不考慮命名規範、可維護性，或者目前使用的 CSS 架構

• 缺乏真實環境測試意識

  AI 不知道不同瀏覽器或解析度的影響，也不知道各種字體 baseline 對 line-height 的差異 ( 特別是中日韓字體 )，更不會特別去處理多語系或無障礙需求。

• 過度保守，結果「堆疊」而非「設計」

  AI 通常是「以防萬一」來寫 CSS ( 因為不知道使用情境 )，所以常常會加了一堆實際上不需要的樣式。

AI 並非無用，它有它的位置

雖然講了很多 AI 的缺點，但對於撰寫過許多生成式 AI 教學的我來說，也想幫 AI 稍微平反一下，事實上，對於熟悉 CSS 的人而言，AI 是很棒的輔助工具，例如：

• 快速產生動畫語法、語法拼接
• 協助補上可能會出錯的缺漏、或解釋已經忘記的 CSS 模組用法
• 重構舊樣式、產出 prototype、驗證邏輯流程

因此之前提到 AI 的缺點，其實反映了 AI 只是工具，AI 並不是並架構師或設計師，若我們已經知道要什麼、限制在哪裡，它就能幫我們省下不少時間，這時 AI 的定義就不是「能不能寫出完美 CSS」，而是「能不能幫我們省下體力、加快開發速度、讓我們更專注在細節」。

AI 不會取代你，但會讓懂 CSS 的人變得更強。

鐵人正式啟動！每天一個 CSS 效果！

CSS 真正的強大不只是語法，而是「讓畫面有節奏、有呼吸感、有互動美學」的能力。這些並不是單靠生成語法就能達到的，而是需要對設計、排版、結構、可維護性都有一定程度的理解才能達成。

這次的鐵人賽，我希望能透過這 30 篇文章，重新發現 CSS 的樂趣、價值與潛力！

今天這篇是暖身介紹，明天開始會正式進入每日主題，歡迎大家一起留言交流、分享心得，明天見！😎

其他

如果想了解更多 CSS 技巧，可以參考我寫的：CSS 教學大全